<template lang="pug">
  el-dialog(
    :visible="visibleDialog"
    :title="title"
    width="1240px"
    append-to-body
    destroy-on-close
    v-el-drag-dialog
    @close="$_handleCancel"
  )
    s-table(
      ref="table1"
      reqUrl="api/milepost_record/getGrowthChildrenList"
      req-method="POST"
      :column="tableObj.column"
      :queryPropsParams="queryPropsParams"
    )
      template(slot="created" slot-scope="text, scope")
        span {{text | dateFilter('YYYY/MM/DD')}}
      template(slot="action" slot-scope="text, scope, index")
        el-button(size="mini" @click="infoRoute(scope)" effect="plain" icon="el-icon-document el-icon--right") 查看

    el-dialog(
      :visible="visibleDetail"
      title="详情"
      width="1240px"
      append-to-body
      destroy-on-close
      :append-to-body="true"
      @close="visibleDetail = false"
    )
      .content(v-loading="loading")
        el-card.pr.detail.commonCard(shadow="never")
          h2 姓名：{{title}}
          p
            span 月龄:{{info.childrenMonthAge}}
          p 评测时间：{{info.created | dateFilter}}
        el-card.commonCard(shadow="never")
          h2(slot="header") 儿心量表
          p(style="white-space: pre-line;") {{info.label}}
        el-card.commonCard(shadow="never")
          h2(slot="header") 格赛尔发育量表
          p(style="white-space: pre-line;") {{info.content}}
        el-card.commonCard(shadow="never" v-if="info.url")
          h2(slot="header") 照片
          div(class="content")
            a-image(v-for="(image, iIndex) in info.url.split('|')" class="cover" :key="iIndex" :url="image" width="120px" height="120px" :preview="true")
</template>
<script>
const column = [
  {
    prop: 'created',
    label: '评测日期'
  },
  {
    prop: 'monthAge',
    label: '里程月龄'
  },
  {
    prop: 'childrenMonthAge',
    label: '测评月龄'
  },
  {
    prop: 'createdBy',
    label: '评测人'
  },
  {
    prop: 'action',
    label: '操作'
  }
]
import { getChildrenDetails } from '../api'
import elDragDialog from '@/directive/el-drag-dialog'
import AImage from '@/components/Basic/Image'
export default {
  components: { AImage },
  directives: { elDragDialog },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    id: {
      type: [Number, String],
      default: ''
    }
  },
  data () {
    return {
      tableObj: {
        column
      },
      info: {},
      loading: false,
      visibleDetail: false
    }
  },
  computed: {
    visibleDialog: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    },
    queryPropsParams () {
      return {
        childrenId: this.id
      }
    }
  },
  watch: {
    visible (val) {
      console.log(val)
      console.log(this.id)
      console.log(this.title)
      if (val) {
        this.refreshTable()
      }
    }
  },
  methods: {
    refreshTable (flag = false) {
      this.$refs.table1.reload()
    },
    // 详情跳转
    infoRoute (res) {
      this.info = res
      this.visibleDetail = true
      this.getDetail(res.id)
    },
    $_handleCancel () {
      this.visibleDialog = false
    },

    getDetail (recordId) {
      this.loading = true
      getChildrenDetails({ recordId }).then(res => {
        console.log(res)
        this.info = res
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .cover{
    margin-top: 10px;
    margin-right: 10px;
  }
</style>
